<template>
  <div class="container">
    <!-- tabPosition设置显示子tab位置  去掉原来的height属性 竖线和最后一行字对齐 否则对不齐  -->
    <!-- tab-click这个不要改名字 人家写好的 -->
    <el-tabs
      :tab-position="tabPosition"
      v-model="impregActiveName"
      @tab-click="handleClick"
    >
      <el-tab-pane name="operationSum" label="运行总表">
        <operationSum v-if="operationSum" />
      </el-tab-pane>
      <el-tab-pane name="eachProcessTime" label="各工序运行时间">
        <eachProcessTime v-if="eachProcessTime" />
      </el-tab-pane>
      <el-tab-pane name="frame1" label="1#框">
        <frame1 v-if="frame1" />
      </el-tab-pane>
      <el-tab-pane name="frame2" label="2#框">
        <frame2 v-if="frame2" />
      </el-tab-pane>
      <el-tab-pane name="frame3" label="3#框">
        <frame3 v-if="frame3" />
      </el-tab-pane>
      <el-tab-pane name="frame4" label="4#框">
        <frame4 v-if="frame4" />
      </el-tab-pane>
      <el-tab-pane name="frame5" label="5#框">
        <frame5 v-if="frame5" />
      </el-tab-pane>
      <el-tab-pane name="frame6" label="6#框">
        <frame6 v-if="frame6" />
      </el-tab-pane>
      <!-- <el-tab-pane name="changeShifts" label="交接班表">
        <changeShifts v-if="changeShifts" />
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script>
import operationSum from './operationSum'
import eachProcessTime from './eachProcessTime'
import frame1 from './frame1'
import frame2 from './frame2'
import frame3 from './frame3'
import frame4 from './frame4'
import frame5 from './frame5'
import frame6 from './frame6'
// import changeShifts from './changeShifts'

export default {
  name: '',
  components: {
    operationSum,
    eachProcessTime,
    frame1,
    frame2,
    frame3,
    frame4,
    frame5,
    frame6
    // changeShifts
  },
  props: [],
  data () {
    return {
      tabPosition: 'right', // 直接:tab-position="left" 不行不能变到左边 应该是因为""里面不是字符串而是left这个值
      // 下面是当前active的那个tabs
      impregActiveName: 'operationSum', // 由于是嵌套的tabs 所以要有两个不同名字的activename
      // 列表
      operationSum: true,
      eachProcessTime: false,
      frame1: false,
      frame2: false,
      frame3: false,
      frame4: false,
      frame5: false,
      frame6: false
      // changeShifts: false
    }
  },
  computed: {},
  watch: {},
  created () {
    this.kind = 'impregnationSystem' // 这个组件是浸渍系统最大的展示页 所以它的属性是dipActiveName
    if (sessionStorage.getItem('dipactiveName')) {
      // 如果当impregActiveName不是子tabs们 证明没进行子tabs里的创建操作 给子tabs一个默认的哥哥operationSum 就把总表operationSum默认v-model绑定的impregActiveName得到operationSum
      if (
        sessionStorage.getItem('dipactiveName') !== 'operationSun' &&
        sessionStorage.getItem('dipactiveName') !== 'eachProcessTime' &&
        sessionStorage.getItem('dipactiveName') !== 'frame1' &&
        sessionStorage.getItem('dipactiveName') !== 'frame2' &&
        sessionStorage.getItem('dipactiveName') !== 'frame3' &&
        sessionStorage.getItem('dipactiveName') !== 'frame4' &&
        sessionStorage.getItem('dipactiveName') !== 'frame5' &&
        sessionStorage.getItem('dipactiveName') !== 'frame6'
      ) {
        this.impregActiveName = 'operationSum'
        this.operationSum = true
        this.eachProcessTime = false
        this.frame1 = false
        this.frame2 = false
        this.frame3 = false
        this.frame4 = false
        this.frame5 = false
        this.frame6 = false
      } else {
        // 否则如果在子tabs中进行过创建操作 就把dipactiveName里面(子tabs的名字)赋给impregActiveName 这样即使浸渍运行记录下面的子tabs中停留 再去hotoilone页面再回到浸渍运行记录页面 这样的跳转也不影响定位到之前打开的子组件页面(就是改了上面data里的impregActiveName)
        this.impregActiveName = sessionStorage.getItem('dipactiveName')
        switch (sessionStorage.getItem('dipactiveName')) {
          case 'eachProcessTime':
            this.operationSum = false
            this.eachProcessTime = true
            this.frame1 = false
            this.frame2 = false
            this.frame3 = false
            this.frame4 = false
            this.frame5 = false
            this.frame6 = false
            break
          case 'frame1':
            this.operationSum = false
            this.eachProcessTime = false
            this.frame1 = true
            this.frame2 = false
            this.frame3 = false
            this.frame4 = false
            this.frame5 = false
            this.frame6 = false
            break
          case 'frame2':
            this.operationSum = false
            this.eachProcessTime = false
            this.frame1 = false
            this.frame2 = true
            this.frame3 = false
            this.frame4 = false
            this.frame5 = false
            this.frame6 = false
            break
          case 'frame3':
            this.operationSum = false
            this.eachProcessTime = false
            this.frame1 = false
            this.frame2 = false
            this.frame3 = true
            this.frame4 = false
            this.frame5 = false
            this.frame6 = false
            break
          case 'frame4':
            this.operationSum = false
            this.eachProcessTime = false
            this.frame1 = false
            this.frame2 = false
            this.frame3 = false
            this.frame4 = true
            this.frame5 = false
            this.frame6 = false
            break
          case 'frame5':
            this.operationSum = false
            this.eachProcessTime = false
            this.frame1 = false
            this.frame2 = false
            this.frame3 = false
            this.frame4 = false
            this.frame5 = true
            this.frame6 = false
            break
          case 'frame6':
            this.operationSum = false
            this.eachProcessTime = false
            this.frame1 = false
            this.frame2 = false
            this.frame3 = false
            this.frame4 = false
            this.frame5 = false
            this.frame6 = true
            break
          default:
            console.log('找不到页面')
            break
        }
      }
    }
  },
  beforeDestory () {
    sessionStorage.setItem('impregActiveName', 'operationSum')
  },
  mounted () {},
  methods: {
    handleClick (tab) {
      switch (tab.index) {
        case '0':
          this.operationSum = true
          this.eachProcessTime = false
          this.frame1 = false
          this.frame2 = false
          this.frame3 = false
          this.frame4 = false
          this.frame5 = false
          this.frame6 = false
          break
        case '1':
          this.operationSum = false
          this.eachProcessTime = true
          this.frame1 = false
          this.frame2 = false
          this.frame3 = false
          this.frame4 = false
          this.frame5 = false
          this.frame6 = false
          break
        case '2':
          this.operationSum = false
          this.eachProcessTime = false
          this.frame1 = true
          this.frame2 = false
          this.frame3 = false
          this.frame4 = false
          this.frame5 = false
          this.frame6 = false
          break
        case '3':
          this.operationSum = false
          this.eachProcessTime = false
          this.frame1 = false
          this.frame2 = true
          this.frame3 = false
          this.frame4 = false
          this.frame5 = false
          this.frame6 = false
          break
        case '4':
          this.operationSum = false
          this.eachProcessTime = false
          this.frame1 = false
          this.frame2 = false
          this.frame3 = true
          this.frame4 = false
          this.frame5 = false
          this.frame6 = false
          break
        case '5':
          this.operationSum = false
          this.eachProcessTime = false
          this.frame1 = false
          this.frame2 = false
          this.frame3 = false
          this.frame4 = true
          this.frame5 = false
          this.frame6 = false
          break
        case '6':
          this.operationSum = false
          this.eachProcessTime = false
          this.frame1 = false
          this.frame2 = false
          this.frame3 = false
          this.frame4 = false
          this.frame5 = true
          this.frame6 = false
          break
        case '7':
          this.operationSum = false
          this.eachProcessTime = false
          this.frame1 = false
          this.frame2 = false
          this.frame3 = false
          this.frame4 = false
          this.frame5 = false
          this.frame6 = true
          break
        default:
          console.log('出错了')
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
